<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>策路管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/field' }">场地管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="field-page">
			<div class="head">
				<el-input v-model="seach" style="width: 150px" placeholder="请输入策略名称" />
				<div class="btn">
					<el-button round :icon="Search" color="#0071bb">搜索</el-button>
				</div>
				<div class="btn">
					<el-button round :icon="Plus" color="#0071bb">新增场地策略</el-button>
				</div>
			</div>
			<div class="box">
				<div class="item" v-for="(item,index) in 3" :key="index">
					<div class="item-top">
						<div class="top-left">
							<img src="/src/assets/device/ability.png" alt="" />
							<div class="copy">场地策略</div>
							<div class="copy">复制1</div>
						</div>
						<div class="top-right">
							<div class="right-text">复制</div>
							<div class="right-text">删除</div>
						</div>
					</div>
                    <div class="item-tag">
                        <div class="item-tag-l">写字楼</div>
                        <div class="item-tag-r">常熟市 世贸大厦</div>
                    </div>
					<div class="item-info">
						<div class="info-text">
							绑定设备数:零售柜0台；提货柜0台
						</div>
						<div class="info-text">
							创建时间:2024-05-21 14:41:01
						</div>
					</div>
					<div class="item-btn">
						<el-button size="small" round @click="dialogVisible1 = true">编辑</el-button>
						<el-button size="small" round color="#0071bb" @click="dialogVisible = true">绑定零售柜</el-button>
						<el-button size="small" round color="#0071bb" @click="dialogVisible = true">绑定提货柜</el-button>
					</div>
				</div>
			</div>
            <el-dialog v-model="dialogVisible" width="50%">
				<div class="title">
					绑定设备
				</div>
				<div class="custom-transfer">
					<div class="transfer-list">
						<div class="all-box">
							<div class="all-check">
								<input type="checkbox" v-model="selectAllSource" @change="handleSourceSelectAll" />
								<label>所有设备</label>
							</div>
							<div class="all-num">
								{{filteredSourceItems.length}}
							</div>
						</div>
						<div class="choice-list">
							<div class="choice-item" v-for="item in searchList" :key="item.index">
								<div class="choice-title">{{item.name}}</div>
								<el-select  v-model="item.ivalue"
									:placeholder="item.placeholder" size="small">
									<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
								</el-select>
							</div>
							<view class="choice-box">
								<div class="choice-btn">
									<el-button size="small" round :icon="Search" color="#0071bb">查询</el-button>
									<el-button size="small" round :icon="RefreshLeft">重置</el-button>
								</div>
							</view>
						</div>
						<ul class="thing">
							<li v-for="item in filteredSourceItems" :key="item.key">
								<input type="checkbox" :value="item" v-model="sourceSelection"
									@change="handleSourceChange" />
								<label>{{ item.label }}</label>
							</li>
						</ul>
					</div>
					<div class="transfer-actions">
						<button @click="moveToSource"><</button>
						<button @click="moveToTarget">></button>
					</div>
					<div class="transfer-list">
						<div class="all-box">
							<div class="all-check">
								<input type="checkbox" v-model="selectAllTarget" @change="handleTargetSelectAll" />
								<label>所有设备</label>
							</div>
							<div class="all-num">
								{{filteredTargetItems.length}}
							</div>
						</div>
						<div class="choice-list">
							<div class="choice-item" v-for="item in searchList" :key="item.index">
								<div class="choice-title">{{item.name}}</div>
								<el-select  v-model="item.ivalue"
									:placeholder="item.placeholder" size="small">
									<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
								</el-select>
							</div>
							<view class="choice-box">
								<div class="choice-btn">
									<el-button size="small" round :icon="Search" color="#0071bb">查询</el-button>
									<el-button size="small" round :icon="RefreshLeft">重置</el-button>
								</div>
							</view>
						</div>
						<ul class="thing">
							<li v-for="item in filteredTargetItems" :key="item.key">
								<input type="checkbox" :value="item" v-model="targetSelection"
									@change="handleTargetChange" />
								<label>{{ item.label }}</label>
							</li>
						</ul>
					</div>
				</div>
				<div class="tips-box">
					<div class="tips">
						自取柜设备可以解绑价格策略,取消价格策略绑定后,需要在对应的设备上直接修改商品价格。
					</div>
					<div>
						<el-button size="small" round color="#0071bb">确定</el-button>
						<el-button size="small" round>取消</el-button>
					</div>
				</div>
			</el-dialog>
			<el-dialog v-model="dialogVisible1" width="900px" title="编辑场地">
				  <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="场地名称" class="w410">
                        <el-input v-model="formInline.user" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="场地名称">
                        <el-input class="w300" v-model="formInline.user" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item :inline="true" label="场地地址" class="w410">
                        <el-form-item class="mr5">
                            <el-select
                                style="width:100px"
                                v-model="formInline.region"
                                placeholder="请选择"
                                clearable
                            >
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                        </el-form-item>
                        <el-form-item label-width="0" class="mr5">
                            <el-select
                            style="width:100px"
                                v-model="formInline.region"
                                placeholder="请输入"
                                clearable
                            >
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                        </el-form-item>
                        <el-form-item label-width="0">
                            <el-select
                            style="width:100px"
                                v-model="formInline.region"
                                placeholder="请输入"
                                clearable
                            >
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="场地商圈">
                         <el-select
                            class="w300"
                            v-model="formInline.region"
                            placeholder="请选择"
                            clearable
                        >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="行业分类"  class="w410">
                         <el-select
                            v-model="formInline.region"
                            placeholder="请选择"
                            clearable
                        >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                         <el-select
                            class="w300"
                            v-model="formInline.region"
                            placeholder="请选择"
                            clearable
                        >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </el-form>
				<div class="tips-box-btn">
					<div>
						<el-button size="small" round color="#0071bb">确定</el-button>
						<el-button size="small" round>取消</el-button>
					</div>
				</div>
			</el-dialog>
            <div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"  layout="prev, pager, next, jumper,total" :total="1"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref,reactive } from "vue";
	import { Search, Plus,RefreshLeft } from '@element-plus/icons-vue'
    import type { ComponentSize } from 'element-plus'
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	interface TransferItem {
		key : string;
		label : string;
	}
    const formInline = reactive({
        user: '',
        region: '',
        date: '',
    })
	const seach = ref('')
	const dialogVisible = ref(false)
	const dialogVisible1 = ref(false)
    const size = ref<ComponentSize>('small')
	const targetItems = ref<TransferItem[]>([]);
	const sourceSelection = ref<TransferItem[]>([]);
	const targetSelection = ref<TransferItem[]>([]);
	const selectAllSource = ref(false);
	const selectAllTarget = ref(false);
	const currentPage = ref(1);
	const pageSize = ref(1);


	const searchList = ref<searchList[]>([
		{
			name: '区域',
			index: '1',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '场景',
			index: '2',
			placeholder: '请选择场景',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备',
			index: '3',
			placeholder: '设备名称或编号',
			type: '2',
			ivalue: ''
		},
		{
			name: '线路',
			index: '4',
			placeholder: '请选择线路',
			type: '1',
			ivalue: ''
		}
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const sourceItems = ref<TransferItem[]>([
		{ key: '1', label: 'Option 1' },
		{ key: '2', label: 'Option 2' },
		{ key: '3', label: 'Option 3' },
		{ key: '4', label: 'Option 4' },
		{ key: '5', label: 'Option 5' },
	]);

	const filteredSourceItems = computed(() => {
		return sourceItems.value.filter(item => item.label.toLowerCase());
	});

	const filteredTargetItems = computed(() => {
		return targetItems.value.filter(item => item.label.toLowerCase());
	});

	const handleSourceChange = () => {
	};

	const handleTargetChange = () => {
	};
	const handleSourceSelectAll = () => {
		if (selectAllSource.value) {
			sourceSelection.value = filteredSourceItems.value.slice();
		} else {
			sourceSelection.value = [];
		}
	};

	const handleTargetSelectAll = () => {
		if (selectAllTarget.value) {
			targetSelection.value = filteredTargetItems.value.slice();
		} else {
			targetSelection.value = [];
		}
	};
	const moveToTarget = () => {
		targetItems.value = [...targetItems.value, ...sourceSelection.value];
		sourceItems.value = sourceItems.value.filter(item => !sourceSelection.value.includes(item));
		sourceSelection.value = [];
		selectAllSource.value = false
	};

	const moveToSource = () => {
		sourceItems.value = [...sourceItems.value, ...targetSelection.value];
		targetItems.value = targetItems.value.filter(item => !targetSelection.value.includes(item));
		targetSelection.value = [];
		selectAllTarget.value = false
		
	};
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>
<style lang="scss" scoped>
    .mr5 {
        margin-right: 5px;
    }
    .w410 {
        width: 410px;
    }
    .w300 {
        width: 300px;
    }
	.tips-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		.tips {
			font-size: 12px;
			font-weight: bold;
            color: #5151ff
		}
	}
	.tips-box-btn {
		display: flex;
		justify-content: right;
		align-items: right;
		padding: 10px 20px;
		.tips {
			font-size: 12px;
			font-weight: bold;
            color: #5151ff
		}
	}
	.custom-transfer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.transfer-list {
		flex: 1;
		padding: 15px;
		height: 45vh;
		border: 1px solid #ccc;
		border-radius: 4px;
		.all-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.all-check {
				display: flex;
				align-items: center;
			}
			.all-num {
				font-size: 14px;
			}
		}
		.choice-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10px;
		
			.choice-item {
				width: 49%;
				display: flex;
				align-items: center;
				margin-bottom: 15px;
		
				.el-select {
					width: 160px;
				}
		
				.choice-title {
					font-size: 12px;
					width: 50px;
				}
			}
		
			.choice-box {
				width: 100%;
				display: flex;
				justify-content: right;
		
				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}
		.thing {
			margin-top: 20px;
		}
	}

	.transfer-list h2 {
		margin-bottom: 10px;
	}

	.transfer-list input[type="text"] {
		width: 100%;
		margin-bottom: 10px;
	}

	.transfer-list ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.transfer-list li {
		margin-bottom: 5px;
	}

	.transfer-actions {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 20px;
	}

	.transfer-actions button {
		margin-bottom: 10px;
		background-color: #ffffff;
		border: 1px solid #ececec;
		padding: 5px 10px;
	}

	.field-page {
		padding: 20px;
		background-color: #ffffff;
		margin-top: 20px;

		.head {
			display: flex;

			.btn {
				margin-left: 10px;
			}
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			.item {
				width: 350px;
				padding: 10px;
				background-color: #f1f1f1;
				border-radius: 10px;
				margin-right: 20px;

				.item-top {
					font-size: 14px;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-left {
						display: flex;
						align-items: center;

						img {
							width: 30px;
							height: 30px;
						}

						.copy {
							margin-left: 10px;
						}
					}

					.top-right {
						display: flex;
						margin-right: 30px;

						.right-text {
							color: #2282c2;
							margin-right: 10px;
							cursor: pointer;
						}
					}
				}
                .item-tag {
                    display: flex;
                    font-size: 12px;
					margin-top: 10px;
                        .item-tag-l{
                            background-color: #0071bb;
                            border-radius: 40px;
                            text-align: center;
                            color: #fff;
                            padding: 2px 10px;
                        }
                        .item-tag-r{
                            background-color: #c6b198;
                            border-radius: 40px;
                            text-align: center;
                            color: #fff;
                            padding: 2px 10px;
                            margin-left: 10px;
                        }

                }
				.item-info {
					margin-top: 20px;
					font-size: 12px;
					color: #999;

					.info-text {
						margin-top: 10px;
					}
				}

				.item-btn {
					margin-top: 30px;
				}
			}
		}

		.title {
			font-size: 18px;
			font-weight: bold;
			padding: 0 20px 10px;
			margin-top: -20px;
		}

		.transfer {
			margin: 0 auto;
			padding: 20px 0;
		}
	}
</style>